<template>
	<div class="business-fail-rate-top-container">
		<div class="analysis-time-box">
			<el-link
				v-for="item in alarmOptions"
				:key="item.alarmTypeId"
				:underline="false"
				:class="item.class"
				class="analysis-time-title"
				@click="handleSearchAlarm(item)"
				>{{ item.name }}</el-link
			>
		</div>
		<!-- 数据列表 -->
		<yd-table
			:formData="extendData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handlerSearch"
			@currentChangeHandler="handlerSearch"
			@sortChangeHandler="handlerSearch"
		></yd-table>
		<el-dialog
			:key="dialog.key"
			v-model="dialog.open"
			width="1500px"
			:close-on-click-modal="false"
			append-to-body
			custom-class="ywgzt-dialog"
			@closed="handleClose"
		>
			<el-row>
				<el-col class="dialogTitle" style="font-size: 20px; color: #fff; font-weight: 900; margin-top: -33px">
					步骤告警明细
					<el-button type="text" :loading="exportLoading" @click="handleClassifyExport">
						<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
					</el-button>
				</el-col>
			</el-row>
			<Dialogs v-if="openshow" ref="setplistRef" :params="responseParams"></Dialogs>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { alarmClassify, stepToBaseAlarmListDownLoad, queryBaseAlarmTypes } from '@/api/ops-workbench/business-alarm-analysis/index';
import Dialogs from './dialogs.vue';
import { parseTime, randomUUID, downloadFromBlob } from '@/utils/common';
import { ref, nextTick, onActivated, reactive, defineExpose, onMounted } from 'vue';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();
const props = defineProps({
	params: {
		type: Object,
		default: () => {},
	},
});

const openshow = ref(false);
const dialog = reactive({
	key: randomUUID(),
	open: false,
});
const responseParams = reactive({
	...props.params,
});
const exportLoading = ref(false);
const alarmOptions = ref<anyObj[]>([]);
const alarmTypeId = ref<anyObj[]>([]);
// 表单额外参数
const extendData = reactive<anyObj>({});

const queryData = reactive({});
// 关联查询参数
const searchData = ref({});
// 列表配置
const tableConfig = reactive({
	columns: [
		{
			label: '告警实值',
			prop: 'alarmResultCode',
		},
		{
			label: '告警类型',
			prop: 'alarmTypeName',
		},
		{
			label: '告警数',
			prop: 'alarmNum',
			operation: [
				{
					text: undefined,
					rowKey: 'alarmNum',
					handler: (scope: anyObj) => jump4BaseDetailList(scope.row),
				},
			],
		},
		{
			label: '最早告警时间',
			prop: 'firstAlarmTime',
			formatter: (row: anyObj, val: string) => {
				return val ? val.substring(0, 19) : val;
			},
		},
		{
			label: '最新告警时间',
			prop: 'lastAlarmTime',
			formatter: (row: anyObj, val: string) => {
				return val ? val.substring(0, 19) : val;
			},
		},
	],
	pagination: {
		pageNum: 1,
		pageSize: 4,
		total: 0,
	},
	pageSizes: [4, 10, 20, 30, 50, 100],
	loading: true,
	disableOrderNumber: true,
	alarmType: true,
});
// 列表数据
const tableData = ref([]);
const setplistRef = ref<any>();

function reloadList(e: anyObj) {
	searchData.value = e;
	handlerSearch();
}
function getBaseAlarmTypes() {
	queryBaseAlarmTypes().then((res: ApiResponse) => {
		for (let i of res.data) {
			i.alarmTypeId = i.id;
			i.class = 'unActive-domain';
		}
		alarmOptions.value = res.data;
		alarmOptions.value.unshift({
			id: '1',
			alarmTypeId: '',
			name: '所有类型',
			class: 'active-domain',
		});
	});
}
//切换告警分类统计
function handleSearchAlarm(obj: anyObj) {
	if (!obj.alarmTypeId) {
		for (let i of alarmOptions.value) {
			if (!i.alarmTypeId) {
				i.class = 'active-domain';
			} else {
				i.class = 'unActive-domain';
			}
		}
		alarmTypeId.value = [];
	} else {
		for (let i = 0; i < alarmOptions.value.length; i++) {
			if (alarmOptions.value[i].alarmTypeId === obj.alarmTypeId && alarmOptions.value[i].class === 'unActive-domain') {
				alarmOptions.value[i].class = 'active-domain';
				alarmOptions.value[0].class = 'unActive-domain';
				alarmTypeId.value.push(alarmOptions.value[i].alarmTypeId);
			} else if (alarmOptions.value[i].alarmTypeId === obj.alarmTypeId && alarmOptions.value[i].class === 'active-domain') {
				alarmOptions.value[i].class = 'unActive-domain';
				alarmOptions.value[0].class = 'unActive-domain';
				for (let k = 0; k < alarmTypeId.value.length; k++) {
					if (alarmTypeId.value[k] === alarmOptions.value[i].alarmTypeId) {
						alarmTypeId.value.splice(k, 1);
					}
				}
				if (alarmTypeId.value.length === 0) {
					alarmOptions.value[0].class = 'active-domain';
				}
			}
		}
	}
	handlerSearch();
}
// 搜索
function handlerSearch() {
	const formData: anyObj = {
		...extendData,
		...queryData,
	};
	tableConfig.loading = true;
	formData.alarmIndicatorIdList = alarmTypeId.value;
	alarmClassify(formData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code === 0) {
			tableData.value = res.data.data;
			tableConfig.pagination.total = res.data.total;
		} else {
			proxy.$modal.msgError(res.msg);
		}
	});
}
function getAlarmTypeId() {
	return alarmTypeId.value;
}
// 打开步骤告警明细弹框
function jump4BaseDetailList(item: anyObj) {
	// responseParams.alarmResultCode = item.alarmResultCode;
	// responseParams.alarmIndicatorIdList = [item.alarmIndicatorId];
	// responseParams.alarmIndicatorName = item.alarmTypeName;
	let data = {
		...queryData,
		alarmResultCode: item.alarmResultCode,
		alarmIndicatorIdList: [item.alarmIndicatorId],
		alarmIndicatorName: item.alarmTypeName,
	};
	dialog.open = true;
	openshow.value = true;
	nextTick(() => {
		setplistRef.value.reloadList(data);
	});
}
// 关闭告警统计列表
function handleClose() {
	dialog.key = randomUUID();
	openshow.value = false;
	dialog.open = false;
}
function handleClassifyExport() {
	let title = '';
	switch (responseParams.alarmIndicatorCode) {
		case 'BS_FAIL_RATE_20':
			title = '响应慢告警分析';
			break;
		case 'BS_FAIL_RATE_10':
			title = '失败率高告警分析';
			break;
		case 'BS_FAIL_RATE_30':
			title = '健康度低告警分析';
			break;
	}
	exportLoading.value = true;
	const d = {
		...responseParams,
	};
	// d.systemName = extendData.systemName;
	// d.businessName = extendData.businessName;
	stepToBaseAlarmListDownLoad(d).then((res) => {
		downloadFromBlob(res, '', title + responseParams.endTime.replace(/\D/g, '') + '.xlsx').then((o) => {
			exportLoading.value = false;
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}
function initQuery() {
	for (let key in proxy.$route.query) {
		queryData[key] = proxy.$route.query[key];
	}
}

onMounted(() => {
	getBaseAlarmTypes();
	initQuery();
	handlerSearch();
});
onActivated(() => {
	initQuery();
	handlerSearch();
});

defineExpose({
	reloadList,
	getAlarmTypeId,
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.analysis-time-box {
	margin-left: 10px;
}
.active-domain {
	padding: 5px;
	margin-right: 8px;
	color: #ffffff;
	background-color: #1c2b5d;
	border-radius: 5px;
}
.unActive-domain {
	padding: 5px;
	margin-right: 8px;
	color: #cacad1;
	background-color: #626c88;
	border-radius: 5px;
}
.analysis-time-title {
	text-align: center;
	margin-bottom: 10px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.dialogTitle {
	font-size: 20px;
	color: #fff;
	font-weight: 900;
	margin-top: -33px;
	width: 80%;
}
.icon-cls {
	width: 20px;
	height: 20px;
	color: #00ffff;
}
</style>
